<template>
	<view class="home">
		<!-- <uv-navbar bgColor="transparent" :fixed="false"/> -->


		<view class="content">
			<view class="section">
				<view @click.stop="onSelectArea" class="area-item">
					<uv-row customStyle="margin-bottom: 10px">
						<uv-icon customPrefix="lst-icon" name="daohang" color="#fff" size="14" />
						<uv-text suffixIcon="arrow-right" :text="cityName" color="#fff" margin="0 0 0 5px"
							:iconStyle="{color: '#fff'}" />
					</uv-row>
				</view>
				<view class="mt-30">
					<uv-search v-model="keyword" bgColor="#FFFFFF" :showAction='false' placeholder="输入你要找的服务"
						placeholderColor="#B1B1B1" @search="doSearch" @clickIcon="doSearch" />
				</view>
				<image
					src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0814/11cc8202508141335402081.png"
					mode="widthFix" class="banner" />

				<swiper indicator-dots class="swiper" indicator-color="#EEEEEE" indicator-active-color="#C8C8C8">
					<swiper-item v-for="(e,i) in Math.ceil(navList.length / 10)">
						<uv-grid :border="false" col="5" customStyle="margin-top: 25px !important;">
							<uv-grid-item :key="index"
								@click="toRoute('/pages-home/service/index?id='+item.id+'&cate='+item.cate_name)"
								v-for="(item,index) in navList.slice(i * 10, (i + 1) * 10)">
								<uv-image :src="item.pic" width="30px" height="30px" />
								<uv-text :text="item.cate_name" align="center" size="12"
									margin="5px 0 10px 0"></uv-text>
							</uv-grid-item>
						</uv-grid>
					</swiper-item>
				</swiper>

				<image
					src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0814/a5315202508141336546682.png"
					mode="widthFix" class="baozhang" />
				<view class="grid-view">
					<image
						src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/b53e3202508130933136214.png"
						mode="widthFix" class="w-full" />
					<view class="grid-item">
						<image
							src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/07be1202508130933418416.png"
							mode="widthFix" class="w-full" @click="toRoute('/pages-home/market/index')" />
						<image
							src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/a61b4202508130934214781.png"
							mode="widthFix" class="w-full" @click="toRoute('/pages-home/market/mall')" />
					</view>
				</view>
				<view class="reg-view">
					<image
						src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/d0672202508130934486225.png"
						mode="widthFix" class="w-full" @click="toRoute('/pages-home/join/skill')" />
					<image
						src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/f97ab202508130935164095.png"
						mode="widthFix" class="w-full" @click="toRoute('/pages-home/join/worker')" />
					<image
						src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/42c76202508130935588130.png"
						mode="widthFix" class="w-full" @click="toRoute('/pages-home/join/merchant')" />
				</view>
			</view>

			<uv-gap height="10" bgColor="#F6F4F7"></uv-gap>

			<view class="section">
				<uv-row justify="space-between" customStyle="margin: 15px 0 10px 0">
					<uv-text :text="babyList.cate_name" size="17px" color="#333333" />
					<uv-text
						@click="toRoute('/pages-home/service/index?id=' + babyList.id + '&cate=' + babyList.cate_name)"
						text="更多" align="right" size="12px" color="#888888" suffixIcon="arrow-right"
						:iconStyle="{color: '#888888', fontSize: '12px'}" />
				</uv-row>
				<uv-row gutter="10px" customStyle="margin-bottom: 10px">
					<uv-col span="4" :key="i" v-for="(e,i) in babyList.product"
						@click="toRoute('/pages-home/service/detail?id='+e.id)">
						<image :src="e.image" mode="widthFix" class="w-full" />
						<uv-text :text="e.store_name" size="14px" color="#333333" margin="5px 0 0 0" />
						<view class="flex justify-between align-end" style="margin-top: 2px;">
							<view class="flex align-end">
								<uv-text prefixIcon="¥" :text="e.price" size="12px" :iconStyle="{color: '#E49C37'}"
									color="#E49C37" style="align-items: end;" />
								<text class="unit" style="margin-bottom: 2px;">{{e.unit?'/'+e.unit:''}}</text>
							</view>
							<text class="sold" style="margin-bottom: 2px;">已售 {{e.sales}}</text>
						</view>
					</uv-col>
				</uv-row>
			</view>

			<uv-gap height="10" bgColor="#F6F4F7"></uv-gap>

			<view class="section">
				<uv-row justify="space-between" customStyle="margin: 15px 0 10px 0">
					<uv-text :text="healthList.cate_name" size="17px" color="#333333" />
					<uv-text
						@click="toRoute('/pages-home/service/index?id=' + healthList.id + '&cate=' + healthList.cate_name)"
						text="更多" align="right" size="12px" color="#888888" suffixIcon="arrow-right"
						:iconStyle="{color: '#888888', fontSize: '12px'}" />
				</uv-row>
				<uv-row gutter="10px" customStyle="margin-bottom: 10px">
					<uv-col span="4" :key="i" v-for="(e,i) in healthList.product"
						@click="toRoute('/pages-home/service/detail?id='+e.id)">
						<image :src="e.image" mode="widthFix" class="w-full" />
						<uv-text :text="e.store_name" size="14px" color="#333333" margin="5px 0 0 0" />
						<view class="flex justify-between align-end" style="margin-top: 2px;">
							<view class="flex align-end">
								<uv-text prefixIcon="¥" :text="e.price" size="12px" :iconStyle="{color: '#E49C37'}"
									color="#E49C37" style="align-items: end;" />
								<text class="unit" style="margin-bottom: 2px;">{{e.unit?'/'+e.unit:''}}</text>
							</view>
							<text class="sold" style="margin-bottom: 2px;">已售 {{e.sales}}</text>
						</view>
					</uv-col>
				</uv-row>
			</view>

			<uv-gap height="10" bgColor="#F6F4F7"></uv-gap>

			<view class="section">
				<uv-row justify="space-between" customStyle="margin: 15px 0 10px 0">
					<uv-text :text="applianceList.cate_name" size="17px" color="#333333" />
					<uv-text
						@click="toRoute('/pages-home/service/index?id=' + applianceList.id + '&cate=' + applianceList.cate_name)"
						text="更多" align="right" size="12px" color="#888888" suffixIcon="arrow-right"
						:iconStyle="{color: '#888888', fontSize: '12px'}" />
				</uv-row>
				<uv-row gutter="10px" customStyle="margin-bottom: 10px">
					<uv-col span="4" :key="i" v-for="(e,i) in applianceList.product"
						@click="toRoute('/pages-home/service/detail?id='+e.id)">
						<image :src="e.image" mode="widthFix" class="w-full" />
						<uv-text :text="e.store_name" size="14px" color="#333333" margin="5px 0 0 0" />
						<view class="flex justify-between align-end" style="margin-top: 2px;">
							<view class="flex align-end">
								<uv-text prefixIcon="¥" :text="e.price" size="12px" :iconStyle="{color: '#E49C37'}"
									color="#E49C37" style="align-items: end;" />
								<text class="unit" style="margin-bottom: 2px;">{{e.unit?'/'+e.unit:''}}</text>
							</view>
							<text class="sold" style="margin-bottom: 2px;">已售 {{e.sales}}</text>
						</view>
					</uv-col>
				</uv-row>
			</view>
			<uv-gap height="30" bgColor="#F6F4F7"></uv-gap>
			<!-- <uv-gap height="20" bgColor="#F6F4F7"></uv-gap>
			<view class="flex" style="padding:  10px">
				<uv-text :text="e.cate_name" :color="active === i ? '#333333' : '#898989'" align="center" size="14px"
					@click="active = i" v-for="(e,i) in stores" :key="i" />
				<uv-text text="更多" :color="active === 3 ? '#333333' : '#898989'" align="center" size="14px"
					@click="toRoute('/pages-home/market/index')" />
			</view>
			<view class="section1">
				<view class="section1-box">
					<uv-gap height="15px" bgColor="#F6F4F7"></uv-gap>

					<view v-for="(item,index) in storeList" :key="index">
						<view class="store flex">
							<uv-image :src="item.image" width="70px" height="70px" />
							<view class="info w-full">
								<view class="title">{{item.title}}</view>
								<view class="address">{{ item.address }}</view>
								<view class="flex align-center">
									<uv-rate :count="5" v-model="item.rate" size="12" active-color="#E59D37" />
									<text class="rate">{{ item.rate.toFixed(2) }}</text>
								</view>
								<view class="flex justify-between align-center w-full">
									<view class="flex">
										<text class="cost">起送￥29</text>
										<text class="cost" style="margin-left: 15px;">配送￥2</text>
									</view>
									<text class="cost">月售165</text>
								</view>
							</view>
						</view>
						<uv-gap height="15px" bgColor="#F6F4F7"></uv-gap>
					</view>


					<uv-gap height="30" bgColor="#F6F4F7"></uv-gap>
				</view>
			</view> -->

		</view>
		<custom-tab-bar />
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		navigate
	} from '@/util/tools.js'
	import {
		getRegionsList,
		getCategoryList,
		getBabyFamily,
		getHealthCare,
		getApplianceRepair,
		getLeadingMarket,
		associatedCommunity,
		getCityWebAreaInfo
	} from '@/api'

	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import CustomTabBar from '@/custom-tab-bar/index.vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/store'
	
	const user = useUserStore()
	const {
		token,
		userInfo
	} = storeToRefs(user)
	
	
	
	
    const active = ref(0)
	const keyword = ref('')
	const cityName = ref('请选择小区')

	const navList = ref([])
	const babyList = ref([])
	const healthList = ref([])
	const applianceList = ref([])
	const stores = ref([])
	const storeList = [{
			sold: 165,
			rate: 5.00,
			qsend: 29,
			psend: 2,
			address: '靖江市平江路169号',
			title: '美好超市',
			image: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/fd4c7202508161359202858.png'
		},
		{
			sold: 165,
			rate: 5.00,
			qsend: 29,
			psend: 2,
			address: '靖江市平江路169号',
			title: '果乐多',
			image: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/75e5a202508160900338514.png'
		},
		{
			sold: 165,
			rate: 5.00,
			qsend: 29,
			psend: 2,
			address: '靖江市平江路169号',
			title: '禾木轻食',
			image: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/b9321202508160901105385.png'
		},
	]

	const toRoute = (url) => uni.navigateTo({
		url
	})

	const doSearch = () => {
		uni.navigateTo({
			url: '/pages-home/search/index?keyword=' + keyword.value
		})
	}

	const getCityLocal = async () => {
		const result = await getCityWebAreaInfo();
		if (result.code == 200) {
			let res = result.result.content;
			cityName.value = res.address_detail.district.includes('市') ? res.address_detail.district : res
				.address_detail.city
		}
	}
	
	onMounted(() => {
		// 监听事件
		uni.$on('refreshAreaSelect', (data) => {
			cityName.value = data.select?.split("/").pop();
			userInfo.value.community_name = cityName.value
			let param={
				community_id:data.community_id
			}
			user.updateUserInfo(userInfo.value)
			const { result } = associatedCommunity(param)
			
		})
	})
	
	
	
	onUnmounted(() => {
		// 页面卸载时取消监听，避免内存泄漏
		uni.$off('refreshAreaSelect')
	})
	

	onShow(() => {
		if(userInfo.value && userInfo.value.community_name){
			cityName.value = userInfo.value.community_name
		}
    })

	onLoad((options) => {
		//getCityLocal();
		

	})

	const onSelectArea = () => {
		let url = '/pages-public/SelectCityArea/SelectCityArea?select_level=5'
		navigate(url)
	}

	const init = async () => {
		const {
			result
		} = await getCategoryList()
		navList.value = result
		babyList.value = (await getBabyFamily()).result
		healthList.value = (await getHealthCare()).result
		applianceList.value = (await getApplianceRepair()).result
		stores.value = (await getLeadingMarket()).result
	}

	init()
</script>
<style>
	page {
		background-image: url('https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0814/e167e202508141334455202.png');
		background-color: #fff;
		background-position: top;
		/* 置顶 */
		background-repeat: no-repeat;
		/* 不重复 */
		background-size: 100% auto;
		/* 宽度撑满，高度自动保持比例 */
		min-height: 100vh;
		padding-top: 88upx;
		padding-bottom: 120upx;
		/* 给tabbar留出空间 */
	}
</style>

<style lang="scss" scoped>
	::v-deep .uni-page-head {
		position: relative;
		display: none;
	}

	::v-deep .uv-navbar__content__left {
		display: none !important;
	}

	.area-item {}

	.home {
		position: relative;
	}

	.top_bg {
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
		min-height: 200px;
		position: absolute;
	}

	.section {
		margin: 0 10px;
		position: relative;
	}

	.section1 {
		background-color: #F6F4F7;

		&-box {
			margin: 0 10px;
		}
	}

	.grid-view {
		margin-top: 20upx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 2列等宽 */
		gap: 10px;
		/* 网格间距 */
		width: 100%;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.reg-view {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 3列等宽 */
		gap: 10px;
		/* 网格间距 */
		width: 100%;
		margin-top: 20upx;
		margin-bottom: 20upx;
	}

	.content {
		z-index: 1;
		position: relative;
		padding-top: 10px;

		.banner {
			width: 100%;
			margin-top: 10px;
		}

		.icon {
			width: 100%;
		}

		.swiper {
			height: 170px;
			box-sizing: border-box;
		}

		.baozhang {
			width: 100%;
		}

		.store {
			padding: 10px 15px;
			border-radius: 5px;
			box-sizing: border-box;
			background-color: #fff;

			.info {
				margin-left: 15px;

				.title {
					color: #333333;
					font-size: 15px;
				}

				.address {
					color: #333333;
					font-size: 10px;
				}

				.rate {
					color: #E59D37;
					font-size: 14px;
				}

				.cost {
					color: #C3C3C5;
					font-size: 10px;
				}
			}
		}
	}
</style>